<template>
	 <uni-nav-bar title="积分商城" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
	 <view class="integral" style="border-radius: 0px;">
	 	<view class="center top_integral"><text>可用积分</text><text>{{userInfo.score}}</text></view>
	 </view>
	 <view class="space-between tabChange">
		<view>
			 <text @click="instell(1)" :style="{color:active===1?'#1B91FF':'#666'}">全部商品</text>
		     <text @click="instell(2)" :style="{color:active===2?'#1B91FF':'#666'}">可兑换商品</text>
		</view>
		 <view class="center" @click="changeAble()">积分 <image :src="des?'../../static/team/shaixuan.png':'../../static/team/shaixuans.png'" mode=""></image></view>
	 </view>
	 <scroll-view
	   scroll-y="true"
	   enable-back-to-top
	   @scrolltolower="loadMore"
	   class="scroll"
	   :style="{ height: pageHeight + 'px',width:'96%',margin:'0px auto' }"
	 >
	 <IntegralShop :orderList="orderLists"></IntegralShop>
	 <view class="column fillings" v-if="orderLists.length<1" style="height:80vh">
	   <image :src="Empty" style="margin-top: 0px;width:250rpx;height:250rpx;"></image>
	   <text>暂无可兑换商品</text>
	 </view>
	  </scroll-view>
</template>

<script setup lang="ts">
	import { navBack } from '@/utils/navigator';
	import IntegralShop from '@c/order/IntegralShop.vue';
	import { ref,onMounted } from 'vue';
	import {onShow} from '@dcloudio/uni-app';
	import { errorToast} from '@/utils/prompt';
	import { myIntegral } from '@/gql/integral';
	import { useUserStore } from '@/stores/user';
	import { Empty } from '@/utils/Static';
	import { isH5 } from '@/utils/platform';
	import { toPublish } from '@mqtt';
  /**
   * 积分商城主页
   * @param userInfo  用户信息
   * @param pageHeight  商品列表高度
   * @param lastPage  商品总页数
   * @param currentPage  当前页数
   * @param orderLists  商品列表
   * @param des  排序状态
   * @param score  赛选积分
   * @param active  筛选状态值
   */
	const userInfo = useUserStore();
	const pageHeight = ref('');
	
	const isLoading = ref(false);
	const lastPage = ref(1);
	const currentPage = ref(1);
	const orderLists=ref([])
	
	const des=ref(false)
	const score=ref(0)
	const active=ref(1)
	onShow(()=>{
		 userInfo.getUserInfo();
	})
	onMounted(() => {
	const num=isH5?160:185
	  uni.getSystemInfo({
	    success: function(res) {
	      pageHeight.value = (res.windowHeight - num).toString();
	    },
	  });
	});
	
	init();
  /**
   * 初始化积分商品列表
   * @param page  页数
   * @param score  分类状态
   * @param order  排序值
   */
	function init() {
	  isLoading.value = true;
	  const payload = {
	    query: myIntegral,
	    variables: {
	      page: currentPage.value,
	      score:Number(score.value),
		    order:des.value?'desc':'asc'
	    },
	  };
	  toPublish(
	    'ql/store/getScoreGoodsList',
	    payload,
	    (obj: any) => {
	      const { score_goods_list } = obj.data;
	      isLoading.value = false;
	      orderLists.value = [...orderLists.value, ...score_goods_list.list];
	      lastPage.value = score_goods_list.lastpage;
	    },
	    () => {
	      errorToast('通讯异常');
	      isLoading.value = false;
	    },
	  );
	}
	/**
	 * 加载更多
	 */
	function loadMore() {
	  if (currentPage.value < lastPage.value) {
	    currentPage.value++;
	    init();
	  }
	}
  /**
   * 积分排序筛选
   * @param des  排序状态
   * @param orderLists  积分商品列表
   * @param currentPage  当前页数
   * @return 更新积分商品
   */
	function changeAble(){
		des.value=!des.value
		orderLists.value=[]
		currentPage.value=1
		init();
	}
  /**
   * 积分排序筛选
   * @param num  积分筛选类型
   * @param active  积分筛选类型索引
   * @param score  积分筛选值
   * @param orderLists  积分商品列表
   * @param currentPage  当前页数
   * @return 更新积分商品
   */
	function instell(num:number){
		active.value=num
		score.value=num==2?userInfo.score:0
		orderLists.value=[]
		currentPage.value=1
		init();
	}
</script>

<style scoped lang="less">
@import url('../pointsMall/less/integral.less');
</style>